<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>3.分析生命周期</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="demo" :qwe="sum">
			<h2>当前求和为：{{sum}}</h2>
			<button @click="add" id="btn">点我+1</button>
			<button @click="death">销毁vm</button>
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			
			let vm = new Vue({
				el:'#demo',
				/* template:`
					<div>
						<h2>2222当前求和为：{{sum}}</h2>
						<button @click="add" id="btn">点我+1</button>
					</div>`, */
				data:{
					sum:1
				},
				methods:{
					add(){
						console.log('add被调用了')
						this.sum += 1
					},
					death(){
						console.log('death被调用了')
						this.$destroy()
					}
				},
				watch:{
					sum(value){
						console.log('sum变化了,最新的值为：',value)
					}
				},
				//数据代理、数据劫持创建之前
				beforeCreate(){
					// console.log('beforeCreate执行了',this)
					// debugger;
					this.projectName = '学生管理系统'
				},
				//数据代理、数据劫持创建完毕
				created(){
					// console.log('created执行了',this)
					// debugger;
				},
				//挂载之前
				beforeMount(){
					// console.log('beforeMount执行了',this)
					// let btn = document.getElementById('btn')
					// btn.innerText = '哈哈'
					// debugger;
				},
				//挂载完毕
				mounted(){
					// console.log('mounted执行了',this.$el)
					// let btn = document.getElementById('btn')
					// btn.innerText = '哈哈'
					// debugger;
				},
				//页面更新之前
				beforeUpdate(){
					// console.log('beforeUpdate执行了',this.sum)
					// debugger;
				},
				//页面更新完毕
				updated(){
					// console.log('updated执行了',this.sum)
					// debugger;
				},
				//即将销毁
				beforeDestroy(){
					console.log('beforeDestroy执行了',this)
					// debugger;
					this.sum += 1 //此行代码无效，不会触发更新流程
				},
				destroyed(){
					// console.log('vm已经被销毁了（不是让vm从地球上消失，而是摧毁vm的精神，也就是vm没有了：响应式、watch、子组件、自定义事件的监听器）',this)
				}
			})
		</script>
	</body>
</html>